<template>
    <div class="QilinDialog">
        <el-dialog
            v-model="ownDialogConfig.isShow"
            :title="ownDialogConfig.title || '提示' "
            :top="ownDialogConfig.top"
            :close-on-click-modal="ownDialogConfig.closeOnClickModal || false"
            :close-on-press-escape="ownDialogConfig.closeOnPressEscape || false"
            :modal="ownDialogConfig.modal ?? true"
            :append-to-body="ownDialogConfig.appendToBody ?? true"
            :width="ownDialogConfig.width || 600 "
            :center="ownDialogConfig.center"
            :fullscreen="ownDialogConfig.fullscreen || false"
            :class="ownDialogConfig.className"
            :before-close="handleClose"
        >
            <slot name="extra"></slot>
            <slot></slot>
            <template v-slot:footer v-if="!ownDialogConfig.isHideFooter">
                <template v-if="ownDialogConfig.additionalButton && ownDialogConfig.additionalButton.length > 0">
                    <el-button
                        v-for="(item,index) in ownDialogConfig.additionalButton"
                        :key="item.btnName+index"
                        :type="item.btnType || 'default' "
                        :size="item.btnSize || 'default' "
                        @click="(item.btnClick && item.btnClick()) || (item.click && item.click())"
                    >{{item.btnName || item.btnText || "额外按钮" }}</el-button>
                </template>
                <el-button
                    v-if="ownDialogConfig.cancelBtnConfig?.isShow ?? true"
                    :type="ownDialogConfig.cancelBtnConfig?.btnType || ownDialogConfig.cancelBtnType || 'default' "
                    :size="ownDialogConfig.cancelBtnConfig?.btnSize || ownDialogConfig.cancelBtnSize || 'default' "
                    @click="handleClose"
                >
                    {{ownDialogConfig.cancelBtnConfig?.btnName || ownDialogConfig.cancelBtnText || "取消" }}
                </el-button>
                <el-button
                    v-if="ownDialogConfig.confirmBtnConfig?.isShow ?? true"
                    :type="ownDialogConfig.confirmBtnConfig?.btnType || ownDialogConfig.confirmBtnType || 'primary' "
                    :size="ownDialogConfig.confirmBtnConfig?.btnSize || ownDialogConfig.confirmBtnSize || 'default' "
                    @click="emits('submitConfirm')"
                >
                    {{ownDialogConfig.confirmBtnConfig?.btnName || ownDialogConfig.confirmBtnText || "确定" }}
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {defineOptions,ref,reactive,computed} from "vue";

defineOptions({
    name:"QilinDialog"
});

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    dialogConfig:{
        type:Object,
        default(){
            return {
                isShow:false, //是否显示弹窗
                title:"提示", //弹窗标题
                top:"15vh", //弹窗的margin-top值
                closeOnClickModal:false, //是否可以通过点击阴影部分即modal部分关闭弹窗
                closeOnPressEscape:false, //是否可以通过按下ESC关闭弹窗
                modal:true, //是否需要遮罩层即modal层
                appendToBody:true, //弹窗元素自身是否插入至body元素上去
                width:600, //弹窗的宽度，默认为600px
                center:false, //弹窗头部和底部是否居中排列
                fullscreen:false, //是否为全屏弹窗，默认为false
                className:"", //弹窗的自定义类名
                isHideFooter:false, //是否隐藏弹窗脚部元素部分
                confirmBtnConfig:{ //弹窗确认按钮的配置项
                    btnName:"确定",
                    btnType:"primary",
                    btnSize:"default",
                    isShow:true
                },
                cancelBtnConfig:{ //弹窗取消按钮的配置项
                    btnName:"取消",
                    btnType:"default",
                    btnSize:"default",
                    isShow:true
                },
                additionalButton:[ //额外按钮的配置项
                    {
                        btnName:"额外按钮", //旧版本btnText
                        btnType:"default",
                        btnSize:"default",
                        btnClick:"event", //旧版本click
                    }   
                ]
            }
        }
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["update:dialogConfig","handleClose","submitConfirm"]);
// 组件自身的配置项
let ownDialogConfig=computed({
    get(){
        return propsValue.dialogConfig;
    },
    set(val){
        emits("update:dialogConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/
// 点击关闭按钮事件监听
const handleClose=()=>{
    emits("handleClose");
};


/*
    生命周期等代码区域
*/

</script>

<style lang="scss">
.el-dialog{
    padding:0;
    >.el-dialog__header{
        padding:var(--el-dialog-padding-primary);
        border-bottom:1px solid $border-color;
        >.el-dialog__headerbtn{
            top:6px;
        }
    }
    >.el-dialog__body{
        padding:var(--el-dialog-padding-primary);
    }
    >.el-dialog__footer{
        padding:var(--el-dialog-padding-primary);
    }
}
</style>
